<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/js/csrf.js"></script>

    <style>

    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form id="form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" disabled value="{{ request.user.username }}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="old_pwd">旧密码</label>
                    <input type="password" id="old_pwd" class="form-control">
                    <span style="color: red;"></span>
                </div>

                <div class="form-group">
                    <label for="new_pwd">新密码</label>
                    <input type="password" id="new_pwd" class="form-control">
                </div>

                 <div class="form-group">
                    <label for="confirm_pwd">确认密码</label>
                    <input type="password" id="confirm_pwd" class="form-control">
                     <span style="color: red;"></span>
                </div>
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <button class="btn btn-primary btn-sm" id="btn01">确定修改</button>
                        <a href="{% url 'app01_home' %}" class="btn btn-sm btn-success">返回首页</a>
                    </div>
                </div>

            </form>

        </div>
    </div>
</div>

<script>
     $('#btn01').on('click',function () {

         let   username=$('#username').val()
         let   old_pwd=$('#old_pwd').val()
         let  new_pwd=$('#new_pwd').val()
         let  confirm_pwd=$('#confirm_pwd').val()

        $.ajax({
            url:'{% url "app01_set_pwd" %}',
            type:'post',
            data:{
                'username':username,
                'old_pwd':old_pwd,
                'new_pwd':new_pwd,
                'confirm_pwd':confirm_pwd,
            },
            success:function (array) {
                alert(array)
                if (array.code===1000){
                    alert(array.msg)
                    //跳转到登录页面
                    parent.location.href=array.url
                }
                else if (array.code===2000){
                    //提示两次密码不一致
                    $('#confirm_pwd').next().text(array.msg)
                }
                else if (array.code===3000){
                    $('#old_pwd').next().text(array.msg)
                }

            }
        })

    })


    //当用户鼠标点击到输入框时，取消错误信息的显示，两次密码输入不一致
    $('#confirm_pwd').focus(function () {
        $(this).next().text('')
    })
    $('#new_pwd').focus(function () {
        $('#confirm_pwd').next().text('')
    })

    //输入的旧密码错误时
    $('#old_pwd').focus(function () {
        $(this).next().text('')
    })



</script>

</body>
</html>